<template>
  <div>
    <div style="margin-left:3%">
      <h4 style="margin-top:8% ;margin-bottom:-8%">头像:</h4>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:8080/user/uploadPhotos"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        style="margin-left:6%"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-button
        type="primary"
        round
        @click="subimage"
        style="margin-left:10%;margin-top:10px"
        >确认上传</el-button
      >
    </div>

    <div style="margin-top:2%;margin-left:3%">
      <h4 style="display:inline">
        姓名:
      </h4>
      <p style="display:inline;margin-left:7%">
        {{ " " + name }}
      </p>
    </div>
    <div style="margin-top:3%;margin-left:3%">
      <h4 style="display:inline">
        学号:
      </h4>
      <p style="display:inline;margin-left:7%">
        {{ " " + number }}
      </p>
    </div>
    <div style="margin-top:3%;margin-left:3%">
      <h4 style="display:inline">
        性别:
      </h4>
      <p style="display:inline;margin-left:7%">
        {{ " " + sex }}
      </p>
    </div>
    <div style="margin-top:3%;margin-left:3%">
      <h4 style="display:inline">
        入学日期:
      </h4>
      <p style="display:inline;margin-left:4%">
        {{ " " + admission_time }}
      </p>
    </div>
    <div style="margin-top:3%;margin-left:3%">
      <h4 style="display:inline">
        电话号码:
      </h4>
      <p style="display:inline;margin-left:4%">
        {{ " " + tel }}
      </p>
    </div>
    <img
      v-if="imageUrl"
      :src="imageUrl"
      style=" width: 500px;height: 500px;margin-top:-51%;margin-left:38%"
    />
  </div>
</template>

<script>
import axios from "axios";
import commons from "../../../assets/commons";
export default {
  props: {},
  data() {
    return {
      //头像
      head_picture: "",
      //头像地址
      imageUrl: "",
      //id,不是userid
      id: 0,
      //姓名
      name: "",
      //学号
      number: "",
      //性别
      sex: "",
      //入学日期
      admission_time: "",
      //电话号码
      tel: ""
    };
  },
  methods: {
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.head_picture = res;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //查询个人信息,将type_id传到后台,后台判断是什么角色
    findPersonal() {
      axios
        .get(
          commons.baseUrl +
            "user/findData?userid=" +
            this.$store.state.userid +
            "&type_id=" +
            this.$store.state.type_id
        )
        .then(res => {
          console.log(res);
          //头像
          if (res.data.data.head_picture != null) {
            this.head_picture = res.data.data.head_picture;
            this.findgetImage();
          }
          //id
          this.id = res.data.data.id;
          //姓名
          this.name = res.data.data.name;
          //学号
          this.number = res.data.data.number;
          //性别
          this.sex = res.data.data.sex;
          //电话号码
          this.tel = res.data.data.tel;
          //入学日期 new Date(scope.row.release_time).toLocaleString()
          this.admission_time = new Date(
            res.data.data.admission_time
          ).toLocaleString();
        });
    },
    // 展示头像
    findgetImage() {
      this.imageUrl = commons.baseUrl + "user/getImage/" + this.head_picture;
    },
    //提交修改头像
    subimage() {
      axios
        .get(
          commons.baseUrl +
            "user/changephone?id=" +
            this.id +
            "&type_id=" +
            this.$store.state.type_id +
            "&head_picture=" +
            this.head_picture
        )
        .then(res => {
          console.log(res);
        });
    }
  },
  mounted() {
    this.findPersonal();
  }
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
